<template>
  <div>
    <el-form class="input-form" label-position="right" label-width="120px" ref="editForm" :rules="propRules" :disabled="propReadonly" :model="form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="包装单位" prop="unit">
            <el-input v-model="form.unit" :disabled="this.form != null &&this.form.id != null"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="换算比率" prop="rate">
            <template slot="label">
              <el-tooltip class="item" effect="dark" content="相对于单品单位的数量" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
              换算比率
            </template>
            <el-input v-model="form.rate" :disabled="this.form != null &&this.form.id != null"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="价格(元)" prop="price">
            <el-input v-model ="form.price" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单品价格(元)" >
            <el-input v-model="baseUnit.price" :disabled="!form.flagBase" @change="baseUnitPriceChange"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单品单位" prop="flagBase">
            <el-switch v-model="form.flagBase" active-color="#13ce66" :disabled="this.form != null &&this.form.id != null"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购单位" prop="flagPurchase">
            <el-switch v-model="form.flagPurchase" active-color="#13ce66" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="请领/配送单位" prop="flagApply">
            <el-switch v-model="form.flagApply" active-color="#13ce66" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="禁用单位" prop="flagDisabled">
            <el-switch v-model="form.flagDisabled" active-color="#13ce66" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      viewData: {},
      baseUnit: {}
    }
  },
  created() {
    let that = this
    that.getBaseUnit()
    this.$emit('event-register', {
      validate: (callback) => {
        this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        if (!this.baseUnit.price && !this.form.flagBase) {
          this.utilMessage.error('没有单品单位，请先设置单品单位')
          return false
        }
        if (this.form.flagBase && this.form.rate != 1) {
          this.utilMessage.error('基准单位的比率必须是1')
          return false
        }
        if (!this.form.flagBase && this.form.rate == 1) {
          this.utilMessage.error('比率是1请勾选单品单位')
          return false
        }
        if (this.form.flagBase && (Number(this.form.price) < 0 || !/^(\d)*(\.(\d){0,4})?$/.test(this.form.price))) {
          this.utilMessage.error('价格不小于0，并且小数位不超过2位')
          return false
        }
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'matrId', this.propInitData.id)
        this.$set(this.form, 'flagBase', this.form.flagBase == undefined ? false : this.form.flagBase)
        this.$set(this.form, 'flagPurchase', this.form.flagPurchase == undefined ? false : this.form.flagPurchase)
        this.$set(this.form, 'flagApply', this.form.flagApply == undefined ? false : this.form.flagApply)
        this.getBaseUnit()
      },
      afterSave: () => {
        //单位更改后，后台已经更新了耗材的单品单位和价格，此处只设置上级表单的单品单位和价格
        if (this.form.flagBase) {
          this.propParentPage.form.skuUnit = this.form.unit
          this.propParentPage.form.skuPrice =  this.form.price
        }
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
      async afterClick(button, data, viewForm) {
        let {key: buttonKey} = button
        if (buttonKey == 'updateProperty') {
          await that.utilVue.loadShow(true)
          await that.$ajax.post('base/matrUnit/updateProperty', that.form)
            .then(response => {
              if (response.code == 0) {
                that.utilMessage.success(response.msg)
                that.utilVue.loadHide()
              } else {
                that.utilMessage.error(response.msg)
              }
            })
        }
      }
    })
  },
  props: {
    propParent: Object,
    propParentPage: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {},
  computed: {},
  methods: {
    //获取基准单位
    getBaseUnit() {
      //单品单位维护时
      if (!this.propParentPage.$refs.childDataView || this.form.flagBase) {
        return
      }
      let rows = this.propParentPage.$refs.childDataView.getRows0()

      let row = rows.find(r => r.flagBase)
      if (row) {
        this.baseUnit = row
      }
    },

    baseUnitPriceChange() {
      this.$set(this.form, 'price', this.baseUnit.price)
    }
  },
  watch: {
    //当包的换算比率发生变化时，重新计算单品数量和总价
    'form.rate': {
      handler(newVal) {
        if (!this.form.flagBase && this.baseUnit.price && newVal) {
          this.form.price = this.utilNum.toFixed(this.baseUnit.price * newVal)
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
